import { listMyAppVoByPageUsingPost } from '@/services/backend/appController';
import { Card, Col, Row } from 'antd';
import Meta from 'antd/es/card/Meta';
import { useEffect, useState } from 'react';

const MyAppPage: React.FC = () => {
	const [appList, setAppList] = useState<API.App[]>([]);
	const [queryParam, setQueryParam] = useState<API.AppQueryRequest>({});
	useEffect(() => {
		listMyAppVoByPageUsingPost(queryParam).then((res) => {
			setAppList(res.data?.records || []);
		});
	}, [queryParam]);
	return (
		<>
			<Row gutter={24}>
				{appList.map((item) => (
					<Col className="gutter-row" span={8} key={item.id}>
						<Card
							hoverable
							style={{ marginBottom : '10px'}}
							cover={<img alt="example" src={item.appIcon} />}
						>
							<Meta title={item.appName} description={item.appDesc} />
						</Card>
					</Col>
				))}
			</Row>
		</>
	);
};

export default MyAppPage;
